<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<div id="app">
			<table style="border:2px solid #999;">
				<tr style="background-color: #999;border:2px solid #000;">
				<th></th>
				<th>ID</th>
				<th>书籍名称</th>
				<th>出版日期</th>
				<th>价格</th>
				<th>购买数量</th>
				<th>操作</th>
				</tr>
				<template v-if="books.length">
				<tr v-for = '(items, index) in books' :key="items.id" style="background-color: #DDD;border:2px solid #000;">
					
				  <td><input type="checkbox" :checked="items.isChecked" 
						onClick="if(this.checked){this.parentNode.parentNode.style.background='#cc5566'}
									else{this.parentNode.parentNode.style.background='#DDD'}"></td>
				  <td>{{items.id}}</td>
				  <td>{{items.name}}</td>
				  <td>{{items.time}}</td>
				  <td>{{items.price | formatPrice}}</td>
				  <td>
				      <button type="button" v-on:click="reduce(items)">-</button></div>
					  {{items.amount}}
				      <button type="button" v-on:click="add(items)">+</button>
				  </td>
				  <td>
					  <button type="button" @click="remove(index)">移除</button>
				  </td>
				</tr>
				</template>
				<template v-else ><td colspan="7"><div style="text-align: center; font-size: 20px; color: aqua;">没有商品</div></td></template>
			</table>
			<h1>总价格：{{total | formatPrice}}</h1>
			
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
			  el: '#app',
			   data : {
			     books: [
			       {isChecked: false,id: 1,time : '2010-10',price : 99,amount : 10,name : '《java从入门到放弃》'},
			       {isChecked: false,id: 2,time : '2012-10',price : 98,amount : 10,name : '《Vue从入门到放弃》'},
				   {isChecked: false,id: 3,time : '2015-10',price : 98,amount : 10,name : '《CSS从入门到放弃》'},
				   {isChecked: false,id: 4,time : '2020-10',price : 999,amount : 10,name : '《啥都从入门到放弃》'}]
			  },
			  computed: {
				  total: function() {
					  return this.books.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.amount,0)
				  },
				  // formatPrice: function() {
					 //  // return function(price) {
						//  //  return '￥' + price.toFixed(2);
					 //  // }
					 //  return price => '￥' + price.toFixed(2);
				  // }
			  },
			  methods: {
				  add: function(items, $event){
					  console.log(items)
					  items.amount++;
				  },
				  reduce: function(items, $event){
					  if(items.amount === 1){
						  return;
					  }
					  console.log(items)
					  items.amount--;
				  },
				  remove: function(index){
					  console.log(index)
					  this.books.splice(index,1);
				  }
			  },
			  filters: {
				  formatPrice: price => '￥' + price.toFixed(2)
			  }
			})
		</script>
	</body>
	
	
	
</html>
